<template>
  <el-scrollbar height="100vh">
    <div
      class="scrollbar-demo-item"
      v-for="(item, index) in list"
      :key="item._id"
    >
      <!-- top块 -->
      <div style="width: 100%; display: flex">
        <!-- 发布者头像 -->
        <img class="avatar" :src="item.img" width="40px" />

        <div>
          <!-- 发布者名称 -->
          <h3 style="color: palevioletred">{{ item.name }}</h3>
          <!-- 发布日期 -->
          <p>日期</p>
        </div>
      </div>
      <!-- content块 -->
      <div>
        <!-- 发布内容 -->
        <div>
          {{ item.content }}
        </div>
        <!-- 发表的图片 -->
        <div style="display: flex; flex-wrap: wrap; gap: 20px">
          <img src="../../../public/cover.jpg" width="200px" height="200px" />
          <img src="../../../public/cover.jpg" width="200px" height="200px" />
          <img src="../../../public/cover.jpg" width="200px" height="200px" />
          <img src="../../../public/cover.jpg" width="200px" height="200px" />
          <img src="../../../public/cover.jpg" width="200px" height="200px" />
          <img src="../../../public/cover.jpg" width="200px" height="200px" />
        </div>
      </div>
      <!-- foot功能块 -->
      <div style="display: flex; gap: 120px; padding: 10px 0">
        <div style="display: flex">
          <svg
            @click="open"
            t="1720842395304"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10302"
            width="20"
            height="20"
          >
            <path
              d="M1009.777778 503.466667l-443.733334-455.111111c-5.688889-5.688889-11.377778 0-11.377777 5.688888v267.377778C8.533333 409.6 2.844444 918.755556 17.066667 932.977778c0 0 45.511111-48.355556 164.977777-113.777778 85.333333-48.355556 224.711111-85.333333 369.777778-102.4v261.688889c0 8.533333 11.377778 11.377778 14.222222 5.688889l443.733334-480.711111z m-398.222222 358.4v-199.111111l-36.977778-2.844445c-221.866667 8.533333-378.311111 73.955556-497.777778 156.444445 76.8-275.911111 267.377778-403.911111 466.488889-438.044445l68.266667-2.844444v-199.111111l312.888888 312.888888s8.533333 5.688889 8.533334 14.222223-8.533333 14.222222-8.533334 14.222222l-312.888888 344.177778z"
              fill="#545E68"
              p-id="10303"
            ></path>
          </svg>
          <span>{{ item.collect }}</span>
        </div>
        <div style="display: flex">
          <svg
            t="1720842208831"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6809"
            width="20"
            height="20"
          >
            <path
              d="M192.32 956.124c-41.193 0-65.913-10.996-71.52-31.811-2.574-9.578-2.574-28.167 26.4-45.011 23.302-13.571 44.596-33.927 63.447-60.611-110.574-81.076-173.564-199.396-173.564-327.709 0-234.087 212.989-424.56 474.764-424.56 261.971 0 475.069 190.451 475.069 424.56 0 234.131-213.12 424.626-475.047 424.626-46.56 0-93.076-6.284-138.393-18.676-63.534 43.527-134.574 59.193-181.156 59.193zM177.658 911.789c4.102 0.436 8.989 0.698 14.662 0.698 41.847 0 106.953-14.967 164.16-56.967l8.706-6.414 10.386 3.076c44.553 13.156 90.393 19.811 136.298 19.811 237.884 0 431.411-170.902 431.411-380.989 0-210.044-193.549-380.924-431.433-380.924-237.731 0-431.127 170.88-431.127 380.924 0 120.174 62.64 230.902 171.862 303.796l17.411 11.629-10.887 17.869c-23.171 38.073-50.553 67.44-81.447 87.491z"
              fill="#272636"
              p-id="6810"
            ></path>
          </svg>
          <span>{{ item.comment }}</span>
        </div>
        <div style="display: flex">
          <svg
            v-if="item.like_flag"
            t="1720953922844"
            @click="dianzan(item._id)"
            class="icon"
            viewBox="0 0 1071 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5364"
            width="20"
            height="20"
          >
            <path
              d="M1041.441824 418.173769C1017.545784 379.457987 976.978907 357.655147 934.856203 355.990951 932.672662 355.651924 930.455865 355.426732 928.182457 355.426732L681.491077 355.156994C698.221007 307.082112 707.361417 255.423948 707.361417 201.600472 707.361417 166.693164 703.416492 132.726219 696.177769 100.007732L695.526642 100.09187C682.3613 42.777911 631.382524 0 570.359886 0 499.341382 0 441.78117 57.86828 441.78117 129.246872 441.78117 133.195164 442.028573 137.076641 442.364598 140.942034 438.548914 278.142407 331.614976 389.360269 196.661604 399.069528L196.661604 399.904721 49.99039 400.248696C48.21671 400.029691 46.431955 399.882449 44.609042 399.882449 20.192356 399.882449 0.39757 419.774863 0.39757 444.313419L0 977.678089C0 1002.211696 19.782477 1022.104111 44.199165 1022.104111 46.59566 1022.104111 48.930613 1021.861596 51.223717 1021.494111L214.393457 1021.562164C216.553627 1021.888817 218.732259 1022.104111 220.969974 1022.104111 223.210149 1022.104111 225.381396 1021.888817 227.525566 1021.56835L840.966989 1021.82695 840.966989 1022.092974C864.997185 1022.137518 889.32402 1015.639107 911.109115 1001.722954 931.788904 988.498463 947.345814 970.345723 957.569383 949.811138 960.374515 945.715604 962.586401 941.106583 963.928028 936.029854L1059.429687 512.279478C1060.754092 507.254717 1061.113516 502.206443 1060.720858 497.29428 1062.705021 470.461729 1056.644245 442.797699 1041.441824 418.173769L1041.441824 418.173769ZM265.44116 938.490887 177.048986 938.469853 177.38132 494.580834C177.38132 494.580834 231.384331 494.238097 265.862117 483.495673L265.44116 938.490887 265.44116 938.490887Z"
              fill="#1296db"
              p-id="5365"
            ></path>
          </svg>
          <svg
            v-else
            @click="dianzan(item._id)"
            t="1720842249135"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8082"
            width="20"
            height="20"
          >
            <path
              d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z"
              p-id="8083"
              fill="#2c2c2c"
            ></path>
          </svg>
          <span>{{ item.like }}</span>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
// 分享弹出框
const open = () => {
  ElMessageBox.confirm('<img src="../../../public/fx.png">', {
    confirmButtonText: "分享",
    cancelButtonText: "取消",
    type: "warning",
    dangerouslyUseHTMLString: true,
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "分享成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消分享",
      });
    });
};
const list = ref([
  {
    _id: 1,
    name: "发布者",
    time: "发布日期",
    content:
      "发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容",
    img: "../../../public/cover.jpg",
    like: 1,
    comment: 1,
    collect: 2,
    like_flag: false,
  },
  {
    _id: 2,
    name: "发布者",
    time: "发布日期",
    content:
      "发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容",
    img: "../../../public/cover.jpg",
    like: 1,
    comment: 1,
    collect: 2,
    like_flag: false,
  },
  {
    _id: 3,
    name: "发布者",
    time: "发布日期",
    content:
      "发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容发布内容",
    img: "../../../public/cover.jpg",
    like: 1,
    comment: 1,
    collect: 2,
    like_flag: false,
  },
]);
const zanlist = ref([]);
const dianzan = (id) => {
  // 没攒过
  if (zanlist.value.indexOf(id) === -1) {
    console.log(1);
    zanlist.value.push(id);
    list.value.forEach((i) => {
      if (i._id === id) {
        i.like++;
        i.like_flag = true;
      }
    });
    // 赞过
  } else {
    for (let i = 0; i < zanlist.value.length; i++) {
      if (zanlist.value[i] === id) {
        zanlist.value.splice(i, 1);
        break; // 找到并删除后立即退出循环
      }
    }
    list.value.forEach((i) => {
      if (i._id === id) {
        i.like--;
        i.like_flag = false;
      }
    });
  }
};
</script>
<style scoped>
.scrollbar-demo-item {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  margin: 10px auto;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.avatar {
  border-radius: 50%;
  margin-right: 10px;
}
</style>
